<template>
  <div class="go-chart-configurations-data" v-if="targetData">
    <div>
      <n-button @click="onEditCustomOptions">自定义数据设置</n-button>
      <n-modal
          v-model:show="open"
            preset="dialog"
            :show-icon="false"
            :style="{ width: '1200px' }"
          >
            <monaco-editor v-model:modelValue="customOptions" height="540px" language="javascript" />
            <template #header>
                <div>自定义选项脚本设置</div>
            </template>
            <template #action>
                <div style="display: flex, justify-content: flex-end">
                    <n-space>
                        <n-button @click="open = false">关闭</n-button>
                        <n-button @click="onEditCustomOptionsOk" type="primary">确定</n-button>
                    </n-space>
                </div>
            </template>
          </n-modal>
    </div>
    <setting-item-box name="请求方式" :alone="true">
      <n-select v-model:value="targetData.request.requestDataType" :disabled="isNotData" :options="selectOptions" />
    </setting-item-box>
    <!-- 静态 -->
    <chart-data-static v-if="targetData.request.requestDataType === RequestDataTypeEnum.STATIC"></chart-data-static>
    <!-- 动态 -->
    <chart-data-ajax v-if="targetData.request.requestDataType === RequestDataTypeEnum.AJAX"></chart-data-ajax>
    <!-- 数据池 -->
    <chart-data-pond v-if="targetData.request.requestDataType === RequestDataTypeEnum.Pond"></chart-data-pond>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { loadAsyncComponent } from '@/utils'
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { useTargetData } from '../hooks/useTargetData.hook'
import { SelectCreateDataType, SelectCreateDataEnum } from './index.d'
import { RequestDataTypeEnum } from '@/enums/httpEnum'
import { MonacoEditor } from '@/components/Pages/MonacoEditor'

const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
const ChartDataAjax = loadAsyncComponent(() => import('./components/ChartDataAjax/index.vue'))
const ChartDataPond = loadAsyncComponent(() => import('./components/ChartDataPond/index.vue'))

const { targetData } = useTargetData()

// 选项
const selectOptions: SelectCreateDataType[] = [
  {
    label: SelectCreateDataEnum.STATIC,
    value: RequestDataTypeEnum.STATIC
  },
  {
    label: SelectCreateDataEnum.AJAX,
    value: RequestDataTypeEnum.AJAX
  },
  {
    label: SelectCreateDataEnum.Pond,
    value: RequestDataTypeEnum.Pond
  }
]

// 无数据源
const isNotData = computed(() => {
  // return typeof targetData.value?.option?.dataset === 'undefined'
  return false
})

const customOptions = ref<any>()
const open = ref(false)
const onEditCustomOptions = () => {
  customOptions.value = targetData.value.customOptions || ''
  open.value = true
}
const onEditCustomOptionsOk = () => {
  console.log("targetData？？",targetData.value);
  targetData.value.customOptions = customOptions.value
  open.value = false
}

</script>
